<template>
  <div class="data-analysis-page">
    <el-card>
      <template #header>
        <div class="header-bar">
          <span>数据分析流程模拟</span>
          <el-button type="primary" size="small" @click="startAnalysis">模拟数据导入与分析</el-button>
          <el-button type="success" size="small" @click="exportReport">导出报告</el-button>
        </div>
      </template>

      <el-steps :active="step" align-center style="margin-bottom: 20px">
        <el-step title="数据导入" />
        <el-step title="数据清洗" />
        <el-step title="异常处理" />
        <el-step title="统计分析" />
        <el-step title="回归分析" />
      </el-steps>

      <div v-if="step === 0" class="step-box">模拟导入了1000条原始数据，字段包括时间、ID、数值、状态...</div>
      <div v-else-if="step === 1" class="step-box">已完成缺失值处理、字段标准化、类型转换等清洗流程。</div>
      <div v-else-if="step === 2" class="step-box">发现异常值32个，已通过IQR方法剔除。</div>
      <div v-else-if="step === 3" class="step-box">
        <el-descriptions title="基础统计与主成分分析" :column="1" border>
          <el-descriptions-item label="平均值">62.37</el-descriptions-item>
          <el-descriptions-item label="最大值">99.80</el-descriptions-item>
          <el-descriptions-item label="主成分贡献率">第一主成分 76.5%</el-descriptions-item>
        </el-descriptions>
      </div>
      <div v-else-if="step === 4" class="step-box">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-card shadow="hover">
              <div class="analysis-card-title">线性回归</div>
              <div>R² = 0.81，显著性通过</div>
              <div>预测值与真实值相关性良好</div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover">
              <div class="analysis-card-title">CART回归树</div>
              <div>树深度：5 层</div>
              <div>重要特征：X1, X2, X3</div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover">
              <div class="analysis-card-title">逐步回归</div>
              <div>最终模型包含4个变量</div>
              <div>剔除冗余特征，提高拟合度</div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const step = ref(0)

function startAnalysis() {
  step.value = 0
  const interval = setInterval(() => {
    if (step.value >= 4) {
      clearInterval(interval)
    } else {
      step.value++
    }
  }, 1000)
}

import { saveAs } from 'file-saver'

function exportReport() {
  const content = `
数据处理与分析报告（模拟）

1. 数据导入：
   - 模拟导入了1000条原始数据，字段包括时间、ID、数值、状态等。

2. 数据清洗：
   - 已完成缺失值处理、字段标准化、类型转换。

3. 异常处理：
   - 检测出32个异常值，使用IQR方法剔除。

4. 基础统计与PCA分析：
   - 平均值：62.37，最大值：99.80
   - 主成分贡献率：第一主成分 76.5%

5. 回归分析：
   - 线性回归：R² = 0.81，拟合良好
   - CART回归树：5 层结构，重要特征 X1, X2, X3
   - 逐步回归：剔除冗余特征，提升模型泛化能力
  `

  const blob = new Blob([content], {
    type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8'
  })
  saveAs(blob, '数据分析报告.doc')
}

</script>

<style scoped>
.header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.step-box {
  background: #f9f9f9;
  padding: 20px;
  border: 1px dashed #dcdfe6;
  border-radius: 6px;
  margin-bottom: 20px;
  min-height: 120px;
}
.analysis-card-title {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 10px;
}
</style>
